{% extends 'base/base_site.html' %}
{% block css %}
    <link rel="stylesheet" type="text/css" href="/static/css/plugins/chosen/chosen.css">
    {{ block.super }}
    <style type="text/css">
        .form-control-bulk-import {
            width: 200px;
            display: inline;
        }
    </style>

{% endblock %}
{% block content %}
    <div class="ibox-title">
        <h5>脚本工具</h5>
    </div>
    <div class="ibox-content">
    <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper form-inline">
        <div class="row">
            <div class="col-sm-8">
                <div class="dataTables_length" id="DataTables_Table_0_length" style="margin-bottom:15px;">
                    {{ request.perms.List }}
                    <a href="{% url 'tools_add' %}" class="btn btn-primary  ">
                                添加脚本</a>
                    <input type="text" placeholder="搜索: 脚本类型、名称等" id="search" class="form-control input-sm">
                </div>
            </div>
        </div>
        <table class="table table-striped table-bordered table-hover dataTables-example dataTable dtr-inline"
               id="DataTables_Table_0" role="grid" aria-describedby="DataTables_Table_0_info">
            <thead>
            <tr role="row">
                <th width="20"><input type="checkbox" id="CheckedAll"></th>
                <th>名称</th>
                <th>脚本类型</th>
                <th>工具说明</th>
                <th>更新时间</th>
                <th>动作{{ error_performance }}</th>

            </tr>
            </thead>
            <tbody id="content">
            {% include 'tasks/tools_table.html' %}
            </tbody>
        </table>

        {% include 'common/paginator.html' %}
    </div>
{% endblock %}

{% block javascripts %}
    {{ block.super }}
    <script src="/static/js/plugins/chosen/chosen.jquery.js" type="text/javascript"></script>
    <!-- 实时搜索 -->
    <script type="text/javascript">
        var flag;

        function func1() {
            clearTimeout(flag);
            flag = setTimeout(function () {
                data();
            }, 200);

        }

        function data() {
            search = $('#search').val();
            $.ajax({
                url: '{% url 'server_search' %}',
                type: 'GET',
                dataType: 'html',
                data: {"search": search},
                success: function (data) {
                    $("#content").html(data);
                }
            });
        }

        $("#search").keyup(function (event) {
            func1();
        });
    </script>
    <!-- 实时搜索End -->

    <script type="text/javascript">
        function resetChosen() {
            var config = {
                '.chosen-select': {
                    width: "100%"
                },
                '.chosen-select-deselect': {
                    allow_single_deselect: true
                },
                '.chosen-select-no-single': {
                    disable_search_threshold: 10
                },
                '.chosen-select-no-results': {
                    no_results_text: 'Oops, nothing found!'
                },
                '.chosen-select-width': {
                    width: "100%"
                },

            }
            for (var selector in config) {
                $(selector).chosen(config[selector]);
            }
            $('#email').trigger("chosen:updated");
        }

    </script>
    <script type="text/javascript">
        function reset() {
            $('#email').val("");
        }

        String.prototype.bool = function () {
            return (/^true$/i).test(this);
        };
    </script>

    <script type="text/javascript">

        $('.btn-email').on('click', function (event) {
            var btn = $(event.target);
            var row = btn.data('row').split('|');
            var id = row[0];
            var cauthor = row[1];
            var nuser = "{{ request.session.fullname }}";
            if (cauthor == nuser || "{{ request.user.is_superuser }}".bool()) {
                $("a").attr("data-target", "#editor");
                $("#email").empty();
                $.get("{% url 'get_email' %}", function (data, status) {
                    if (data.length > 0 && status == "success") {
                        $.each(jQuery.parseJSON(data), function (k, v) {
                            var obj = document.getElementById("email");
                            var op = new Option(v.name, v.name)
                            obj.add(op);
                        })
                    }
                    resetChosen();

                });

                $('.btn-commit').on('click', function () {
                    var email_group = $('#email').val();
                    $.ajax({
                        type: "POST",
                        url: "{% url 'send_mails' %}",
                        async: true,
                        data: {"content_id": id, "email_group": JSON.stringify(email_group)},
                        success: function (data, textStatus) {
                            window.location.reload()
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(XMLHttpRequest.status);
                            alert(XMLHttpRequest.readyState);
                            alert(textStatus);
                        },
                    });
                });
            }
            else {
                $("a").removeAttr("data-target");
                alert("只有创建者才可以发送通知！");
            }

        });

    </script>

{% endblock %}